<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="header">
        <button class="btn btn-bg2">批量导入</button>
        <div class="search">
          <el-select v-model="value1" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-select v-model="value2" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-select v-model="value3" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value"
          /></el-select>
          <el-input v-model="input" placeholder="检索" class="input-with-select">
            <template #prepend>
              <el-select class="w100" v-model="select" placeholder="选择">
                <el-option label="工单编号" value="1" />
                <el-option label="工单编号" value="2" />
                <el-option label="工单编号" value="3" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData">
          <el-table-column show-overflow-tooltip prop="date" label="批量导入编号" />
          <el-table-column show-overflow-tooltip prop="city" label="表单数量" width="120" />
          <el-table-column show-overflow-tooltip prop="city" label="导入数量" width="120" />
          <el-table-column show-overflow-tooltip prop="address" label="工单模块" width="120" />
          <el-table-column show-overflow-tooltip prop="zip" label="受理网点" width="120" />
          <el-table-column show-overflow-tooltip prop="zip" label="客服" width="120" />
          <el-table-column show-overflow-tooltip prop="state" label="导入时间" width="200" />
          <el-table-column show-overflow-tooltip prop="state" label="导入状态" width="120" />
          <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
            <template #default>
              <div class="btns">
                <button class="btn-table bgColor2">查看</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="pagina"> <Pagination /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Pagination from '../../../../components/Pagination/index.vue'
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  const value1 = ref('')
  const value2 = ref('')
  const value3 = ref('')
  const input = ref('')
  const select = ref('')
  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]

  const tableData = [
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>

<style lang="scss" scoped>
  @import './index';
</style>
